<script lang="ts" setup>
import type {
  goodsData,
  commentDataType,
  commentListType,
  goodsFormType,
} from "../goods-manage/type";
import type { userInfoType, goodsType } from "./type";
import request from "@/utils/request";
import { ref, onMounted, reactive, watchEffect } from "vue";
import time from "@/utils/time";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import worksList from "@/components/worksList/worksList.vue";
// @ts-ignore
import empty from "@/components/empty/index.vue";
const router = useRouter();
const route = useRoute();
const userInfo = ref<userInfoType>();
const userGoods = ref<goodsType[]>();
const getUserInfo = async () => {
  const res = await request.get(`/user/info/${route.params.username}`);
  userInfo.value = res.data[0][0][0];
  userGoods.value = res.data[1][0];
};

onMounted(() => {
  watchEffect(() => {
    getUserInfo();
  });
});

const store = useStore();
const tableData = ref<goodsData[]>();

const goodsFrom = reactive<goodsFormType>({
  username: "",
  times: "",
  avatar: "",
  name: "",
  content: "",
  category: "",
  imageList: "",
});

const commentData = reactive<commentDataType>({
  times: new Date(),
  goodsId: "",
  username: store.state.userInfo.username,
  comment: "",
  name: store.state.userInfo.name,
  avatar: store.state.userInfo.avatar,
});

const commentValue = ref("");
const commentList = ref<commentDataType[]>([]);
const dialogTableVisible = ref(false);

//打开详情页
const handlePreview = async (data: goodsData) => {
  commentData.goodsId = data.id;
  Object.assign(goodsFrom, data);
  goodsFrom.imageList = JSON.parse(data.imageList).map(
    (url: string) => "http://localhost:3000/" + url
  );
  dialogTableVisible.value = true;
  const res = await request.get(`/goods/commentList/${commentData.goodsId}`);
  commentList.value = res.data;
};
//发布评论
const commentPost = async () => {
  commentData.comment = commentValue.value;
  const res = await request.post<any, commentListType>("/goods/comment", commentData);
  if (res.code == "200") {
    commentList.value.unshift(commentData);
    commentValue.value = "";
  }
};
</script>

<template>
  <el-page-header @back="router.back()">
    <template #content>
      <span class="text-large font-600 mr-3">{{ userInfo?.name }} </span>
    </template>
  </el-page-header>
  <div class="userInfoBox">
    <el-avatar :size="130" :src="`http://localhost:3000${userInfo?.avatar}`" />
    <p>
      {{ userInfo?.name }}
    </p>
    <p>账号：{{ userInfo?.username }}</p>
    <p>{{ userInfo?.signature }}</p>
    <br />
  </div>
  <div class="goodsBox">
    <empty v-if="userGoods?.length == 0"></empty>
    <div class="grid-container" ref="backToTopBtn" v-else>
      <worksList v-for="item in userGoods" :item="item" @click="handlePreview(item)">
      </worksList>
    </div>
  </div>

  <el-dialog
    style="border-radius: 10px; padding-bottom: 16px"
    v-model="dialogTableVisible"
    :destroy-on-close="true"
    v-if="dialogTableVisible"
    :show-close="false"
    width="70vw"
    top="10vh"
  >
    <div class="left">
      <el-carousel :autoplay="false" loop height="70vh">
        <el-carousel-item
          style="height: 100%"
          v-for="item in goodsFrom.imageList"
          :key="item"
        >
          <el-image
            :src="item"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="goodsFrom.imageList"
            :hide-on-click-modal="true"
            :preview-teleported="true"
            fit="contain"
          />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="right">
      <div class="myData">
        <el-avatar :src="`http://localhost:3000${userInfo?.avatar}`" />
        <span style="font-size: 15px; font-weight: 600">{{ userInfo?.name }}</span>
      </div>
      <p class="times">{{ time(goodsFrom.times) }}</p>
      <br />
      <pre class="pre">{{ goodsFrom.content }}</pre>
      <br />
      <el-divider content-position="right">评论区</el-divider>
      <div class="commentBox">
        <div class="commentList" v-if="commentList.length != 0">
          <div class="comment" v-for="item in commentList">
            <div class="myData">
              <el-avatar :src="`http://localhost:3000${item.avatar}`" :size="28" />
              <span>{{ item.name }}</span>
            </div>
            <p style="text-align: right; color: gray; font-size: 13px">
              {{ time(item.times) }}
            </p>
            <p>{{ item.comment }}</p>
          </div>
        </div>
      </div>
      <el-input
        class="commentInput"
        v-model="commentValue"
        style="width: 100%"
        placeholder="请输入评论..."
        @keyup.enter="commentPost"
      >
      </el-input>
    </div>
    <div style="clear: both"></div>
  </el-dialog>
</template>
<style lang="scss" scoped>
.myData {
  display: flex;
  align-items: center;
  padding: 5px 0 5px 5px;
  span {
    padding-left: 7px;
    font-weight: 500;
  }
}
.userInfoBox {
  padding-top: 50px;
  text-align: center;
  p {
    color: gray;
    margin: 10px 0;
    text-align: center;
  }
}

:deep(.el-image) {
  width: 100%;
  height: 100%;
}
.el-carousel {
  position: relative;
}
.times {
  text-align: right;
}
.right {
  width: 40%;
  height: 70vh;
  float: right;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  position: relative;
  overflow: scroll;
  .commentBox {
    flex: 1;
    overflow: scroll;
    .comment {
      padding: 10px;
      line-height: 15px;
    }
  }
  .commentInput {
    position: sticky;
    bottom: 0;
  }
}
.left {
  width: 60%;
  height: 70vh;
  float: left;
}

.pre {
  white-space: pre-wrap; /* 或者 pre，但 pre-wrap 会更合适 */
  word-wrap: break-word; /* 对于长单词或URL，确保它们也能换行 */
  overflow-wrap: break-word; /* 兼容性更好的替代方案 */
  font-family: "微软雅黑";
}

.grid-container {
  width: 70%;
  font-weight: 600;
  margin-top: 30px;
  column-count: 4;
  column-gap: 15px;
  margin: 30px auto;
}
</style>
